<template>
  <view class="ai-settings-container">
    <view class="card">
      <text class="title">AI 配置（测试版）</text>
      <view class="field">
        <text class="label">API地址</text>
        <input class="input" v-model="form.baseURL" placeholder="https://api.52vmy.cn/api/chat/spark" />
      </view>
      <view class="field">
        <text class="label">模型名称</text>
        <input class="input" v-model="form.model" placeholder="spark" />
      </view>
      <view class="field">
        <text class="label">API密钥</text>
        <input class="input" v-model="form.apiKey" placeholder="无需密钥" disabled />
      </view>
      <view class="tips">
        <text>说明：</text>
        <text>· 该功能为测试版，生成内容可能不稳定；</text>
        <text>· 使用52vmy API，无需注册，完全免费；</text>
        <text>· 成功保存后返回文字生存页生效。</text>
      </view>
      <view class="actions">
        <button class="btn" @click="save">保存</button>
        <button class="btn secondary" @click="back">返回</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: { 
        baseURL: 'https://api.52vmy.cn/api/chat/spark', 
        model: 'spark',
        apiKey: ''
      }
    }
  },
  onLoad() {
    try {
      const raw = uni.getStorageSync('textAIConfig')
      if (raw) {
        const cfg = JSON.parse(raw)
        this.form = { ...this.form, ...cfg }
      }
    } catch (e) {}
  },
  methods: {
    save() {
      try {
        uni.setStorageSync('textAIConfig', JSON.stringify(this.form))
        uni.showToast({ title: '已保存', icon: 'success' })
        setTimeout(() => { this.back() }, 500)
      } catch (e) {
        uni.showToast({ title: '保存失败', icon: 'error' })
      }
    },
    back() { uni.navigateBack() }
  }
}
</script>

<style scoped>
.ai-settings-container { min-height: 100vh; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); padding: 20rpx; }
.card { background: rgba(255,255,255,0.06); border: 1rpx solid rgba(255,255,255,0.1); border-radius: 12rpx; padding: 20rpx; color: #e5e7eb; }
.title { font-size: 28rpx; font-weight: bold; margin-bottom: 16rpx; color: #f8fafc; }
.field { margin-bottom: 12rpx; }
.label { display: block; font-size: 22rpx; margin-bottom: 6rpx; color: #cbd5e1; }
.input { background: #0b1220; border: 1rpx solid #1f2937; border-radius: 8rpx; padding: 12rpx; color: #e5e7eb; font-size: 24rpx; }
.tips { margin-top: 12rpx; font-size: 20rpx; color: #cbd5e1; display: grid; gap: 6rpx; }
.actions { display: flex; gap: 12rpx; margin-top: 16rpx; }
.btn { background: #334155; color: #e5e7eb; border: 1rpx solid #475569; border-radius: 10rpx; padding: 12rpx; font-size: 24rpx; }
.btn.secondary { background: #1f2937; }
</style> 